<template>
    <div ref="mapDiv">
        <el-amap class="amap-box" vid="amap" ref="map"
                 viewMode="3D"
                 :pitch="pitch"
                 rotateEnable="true"
                 mapStyle="light"
                 :amap-manager="amapManager"
                 :center="center"
                 :plugin="plugin"
                 :default-cursor="'default'"
                 :events="events"
                 :zoom="zoom">
            <!-- 区域标记点 -->
            <div v-if="!eMarkersExist">
                <el-amap-marker v-for="(item,index) in areaMarkers" :key="'key_'+item.area.areaId" v-if="item.area.enable"
                                :index="item.area.areaId+''"
                                :extData="item"
                                :vid="'amap-marker_' + item.area.areaId"
                                :position="[item.area.areaLng,item.area.areaLat]"
                                :events="item.events" />
            </div>
            <!-- 设备标记点 -->
            <div v-if="eMarkersExist">
                <el-amap-marker v-for="(item,index) in equipmentMarkers" :key="'key_'+item.equipment.equipmentId" v-if="item.equipment.enable"
                                :index="item.equipment.equipmentId+''"
                                :extData="item"
                                :vid="'amap-marker_' + item.equipment.equipmentId"
                                :position="[item.equipment.positionLng,item.equipment.positionLat]"
                                :events="item.events" />
                <el-amap-circle v-for="(item,index) in equipmentMarkers" :key="'circle_'+item.equipment.equipmentId" v-if="item.equipment.enable"
                                :center="[item.equipment.positionLng,item.equipment.positionLat]"
                                :radius="item.equipment.radius"
                                :strokeWeight="0"
                                :fill-color="'#a0cff6'"
                                :fill-opacity="0.6" />
            </div>
            <el-amap-info-window autoMove="true"
                                 :position="window.position"
                                 :visible="window.visible"
                                 :content="window.content"
                                 :events="window.events"
                                 :offset="window.offset"/>
        </el-amap>
    </div>
</template>

<script>
import {mapState,mapActions} from "vuex";
import {AMapManager} from "vue-amap";

let amapManager = new AMapManager();

export default {
    name: "EquipmentMap",
    data(){
        let _this = this;
        return {
            center: [104.06584, 30.65787],
            zoom: 4,
            pitch: 0,                   //地图俯仰角度，有效范围为0-83度
            amapManager,
            plugin: [
                'AMap.Autocomplete',
                'AMap.PlaceSearch',
                'AMap.Scale',
                'AMap.ToolBar'
            ],
            events: {
                zoomend(){
                    // console.log(amapManager.getMap().getZoom())
                    if(amapManager.getMap().getZoom() >= 13){
                        if(!_this.eMarkersExist){
                            _this.eMarkersExist = true;
                            _this.initEquipmentMarkers();
                        }
                    }else{
                        if(_this.eMarkersExist){
                            _this.eMarkersExist = false;
                            _this.initAreaMarkers();
                        }
                    }
                }
            },
            areaMarkers: [],            //记录地图上的区域标记点
            equipmentMarkers: [],       //记录地图上的标记点
            eMarkersExist: false,       //用于判断设备标记点是否生成,避免重复
            windows: [],                //用于存储区域信息
            window: {                   //用于控制当前info-window的显示内容
                position: [104.06584, 30.65787],
                visible: false,
                content: "default",
                offset: [0, -30],
                events: {
                    close(){
                        _this.window.visible = false
                    }
                }
            }
        }
    },
    computed: {
        ...mapState({
            equipmentData: state => state.active.equipmentData,
            areaData: state => state.active.areaData
        })
    },
    methods: {
        initAMap(){
            let _this = this;
            //获取map实例
            let map = amapManager.getMap();
            //创建一个右键菜单
            let contextMenu = new AMap.ContextMenu();
            //添加菜单item
            contextMenu.addItem("放大一级",function (){
                map.zoomIn();
            },0);
            contextMenu.addItem("缩小一级",function (){
                map.zoomOut();
            },1);
            contextMenu.addItem("恢复默认缩放",function (){
                map.setZoomAndCenter(4,_this.center);
                //vue-amap中的:zoom并不是双向绑定的,所以虽然通过setZoomAndCenter()改变了amap的zoom值,但页面data中的zoom值仍然需要手动更改(vue-amap是真的不行...)
                _this.zoom = 4;
                _this.pitch = 0;
                map.setRotation(0);
            },2);
            //地图实例绑定右键事件打开菜单
            map.on('rightclick',function (e){
                contextMenu.open(map,e.lnglat);
            })
        },
        initAreaMarkers() {
            let _this = this;
            //先清空数组,避免每次改变都会生成一组新的marker却用的同样的index,导致报错
            this.areaMarkers = [];
            this.window.visible = false;
            this.window.content = "default";
            //将每个地区的地址分类存入areaMarkers
            for(let item of this.areaData){
                this.areaMarkers.push({
                    area: item,
                    events: {
                        mouseover(e){
                            //获取绑定在el-amap-marker上的数据
                            let target = e.target.getExtData().area;
                            //设置点击逻辑
                            _this.window.position = [target.areaLng,target.areaLat];
                            _this.window.visible = true;
                            _this.window.content = '<div class="area-marker-info-window">' +
                                '                       <div>区域名称：' + target.areaName + '</div>' +
                                '                       <div>所属城区：' + target.areaRemarks + '</div>' +
                                '                       <div>部署数量：' + target.count + '</div>' +
                                '                       <div>发送频率：' + target.frequency + ' min/次</div>' +
                                '                       <div>创建日期：' + target.createDate + '</div>' +
                                '                   </div>'
                        },
                        mouseout(e){
                            _this.window.visible = false;
                        },
                        dblclick(e){
                            //获取绑定在el-amap-marker上的数据
                            let target = e.target.getExtData().area;
                            //获取map实例
                            let map = amapManager.getMap();
                            if(_this.zoom>12){
                                //复位
                                _this.zoom = 4;
                                _this.pitch = 0;
                                map.setRotation(0);
                            }else{
                                _this.center = [target.areaLng,target.areaLat];
                                //放大
                                _this.zoom = 16;
                                _this.pitch = 0;
                                map.setRotation(0);
                                //关闭info-window
                                _this.window.visible = false;
                            }
                        }
                    }
                })
            }
        },
        initEquipmentMarkers(){
            let _this = this;
            //先清空数组,避免每次改变都会生成一组新的marker却用的同样的index,导致报错
            this.equipmentMarkers = [];
            this.window.visible = false;
            this.window.content = "default";
            //将每个地区的地址分类存入equipmentMarkers中
            for(let item of this.equipmentData.data){
                this.equipmentMarkers.push({
                    equipment: item,
                    events: {
                        mouseover(e){
                            //获取绑定在el-amap-marker上的数据
                            let target = e.target.getExtData().equipment;
                            let state = '';
                            switch (target.state){
                                case 1: state = '正常';break;
                                case 2: state = '延迟';break;
                                case 3: state = '中断';break;
                                default: state = '未知错误';break;
                            }
                            _this.window.position = [target.positionLng,target.positionLat];
                            _this.window.visible = true;
                            _this.window.content = '<div class="equipment-marker-info-window">' +
                                '                       <div>设备编号：' + target.equipmentId + '</div>' +
                                '                       <div>剩余电量：' + target.power + ' %</div>' +
                                '                       <div>运行时长：' + target.runtime + ' h</div>' +
                                '                       <div>监测半径：' + target.radius + ' 米</div>' +
                                '                       <div>安置海拔：' + target.altitude + ' 米</div>' +
                                '                       <div>网络状态：' + state + '</div>' +
                                '                   </div>'
                        },
                        mouseout(e){
                            _this.window.visible = false;
                        },
                        dblclick(e){
                            let map = amapManager.getMap();
                            _this.zoom = 4;
                            _this.pitch = 0;
                            map.setRotation(0);
                            //保证进行地图缩放时的中心点不变,等缩放结束后再变更中心点
                            setTimeout(()=>{
                                _this.center = [104.06584, 30.65787];
                            },400);
                        }
                    }
                })
            }
        }
    },
    mounted() {
        this.initAreaMarkers();
    },
    watch: {
        areaData(newValue,oldValue){
            //初始化areaMarker数据
            this.initAreaMarkers();
        },
        equipmentData(newValue,oldValue){
            //初始化equipmentMarker数据
            this.initEquipmentMarkers();
            //初始化地图
            this.initAMap();
        }
    }
}
</script>

<style scoped>
.amap-box{
    height: 750px;
}

/deep/ .amap-info-content{
    padding: 10px 18px 10px 18px;
}

/deep/ .area-marker-info-window{
    height: 100px;
    width: 360px;
    margin: 0;
    border-radius: 10px;
}

/deep/ .equipment-marker-info-window{
    height: 120px;
    width: 140px;
    margin: 0;
}

/deep/ .area-marker-info-window div{
    font-size: 14px;
    color: #99a9bf;
}

/deep/ .equipment-marker-info-window div{
    font-size: 14px;
    color: #99a9bf;
}

/deep/ .amap-info-close{
    top: 10px;
    right: 10px !important;
}

</style>